<!DOCTYPE html>
<html lang="en">
<head>
    <title>Forgot Password - Sip Smart</title>
    <meta name="comp2800 template" content="My 2800 App">
    <!-- Bootstrap and jQuery CDN -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    
    <!-- Custom Styles (optional) -->
    <style>
        body {
            background-color: #f8f0f3;
        }
        .card {
            border-radius: 15px;
            max-width: 500px;
            margin: 50px auto;
        }
        .form-label {
            color: #332328;
        }
        .btn-warning {
            background-color: #885768;
            border: none;
        }
        .btn-warning:hover {
            background-color: #6c4252;
        }
    </style>
</head>
<body>
    <!-- Navbar Placeholder -->
    <nav id="navbarPlaceholder"></nav>

    <!-- Forgot Password Section -->
    <section class="vh-100 d-flex align-items-center">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-8 col-lg-6">
                    <div class="card p-4 p-lg-5">
                        <h2 class="text-center mb-4" style="color: #332328;">Forgot Password</h2>
                        <p class="text-muted text-center mb-5">Enter your registered email to reset your password</p>

                        <form id="forgotForm">
                            <!-- Email Input -->
                            <div class="form-outline mb-4">
                                <input type="email" id="forgotEmail" class="form-control form-control-lg" required>
                                <label class="form-label" for="forgotEmail">Registered Email</label>
                            </div>

                            <!-- Reset Button -->
                            <div class="text-center">
                                <button type="button" class="btn btn-warning btn-lg w-100" onclick="resetPassword()">
                                    Send Reset Link
                                </button>
                            </div>

                            <!-- Back to Login -->
                            <p class="mt-4 text-muted text-center">
                                Already have an account? <a href="login.html" class="text-body fw-bold">Login Now</a>
                            </p>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer Placeholder -->
    <nav id="footerPlaceholder"></nav>

    <!-- Skeleton Script (Navbar/Footer Loading) -->
    <script src="./scripts/skeleton.js"></script>
    <!-- Password Reset Logic -->
    <script src="./scripts/forgot_password.js" defer></script>
</body>
</html>